<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="25%" title="上传文件">
    <el-form ref="ruleFormRef" label-width="100px" label-suffix=":" :rules="rules" :model="operateDataInfo">
      <el-form-item label="分片上传">
        <el-switch v-model="chunk"></el-switch>
      </el-form-item>
      <!-- 表单内容-->
      <el-form-item label="存储平台" prop="platform">
        <el-select v-model="operateDataInfo.platform" placeholder="请选择存储平台">
          <el-option
            v-for="item in drawerProps.enumMap?.get('platform')"
            :key="item.platform"
            :label="item.platform"
            :value="item.platform"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="存储文件" prop="fileList">
        <UploadFile
          drag
          show-file-list
          multiple
          ref="uploadFileRef"
          :platform="operateDataInfo.platform"
          :chunk="chunk"
          :limit="3"
          :on-exceed="handleExceed"
          v-model:file-list="operateDataInfo.fileList"
          :auto-upload="false"
        >
          <el-icon class="el-icon--upload">
            <upload-filled />
          </el-icon>
          <div class="el-upload__text">将文件拖拽到这里或者 <em>点击上传</em></div>
          <template #tip="{ progress }">
            <div v-if="!chunk" class="el-upload__tip">支持批量上传!</div>
            <el-progress :percentage="progress"></el-progress>
          </template>
        </UploadFile>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="drawerVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { UploadFilled } from "@element-plus/icons-vue";
import { ElMessage, FormInstance, UploadProps } from "element-plus";
import { UploadFileParam } from "@/api/modules/file/FileDetail";
import UploadFile from "@/components/Upload/UploadFile.vue";

interface DrawerProps {
  getTableList?: () => void;
  enumMap?: Map<string, { [key: string]: any }[]>;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({});
const chunk = ref<boolean>(false);
// 自定义的文件上传组件
const uploadFileRef = ref<InstanceType<typeof UploadFile>>();

const handleExceed: UploadProps["onExceed"] = () => {
  ElMessage.warning(`上传文件数量超出限制！`);
};

const rules = reactive({
  platform: [{ required: true, message: "请选择存储平台" }]
});

const operateDataInfo = ref<UploadFileParam>({ platform: "", fileList: [] });
const openDrawer = async (params: DrawerProps) => {
  // 新增前的默认值
  chunk.value = false;
  operateDataInfo.value = { platform: "", fileList: [] };
  drawerProps.value = params;
  drawerVisible.value = true;
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = async () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    if (operateDataInfo.value.fileList.length == 0) return;
    try {
      await uploadFileRef.value?.handleUpload();
      ElMessage.success({ message: `上传成功！` });
      drawerProps.value.getTableList!();
      drawerVisible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

defineExpose({
  openDrawer
});
</script>

<style scoped lang="scss"></style>
